<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/animate.css">
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
  <style>
    #app {
      width: 100vw;
      height: 100vh;
      background-color: gray;
    }

    header {
      width: 100vw;
      background-color: #444E55;
      height: 6vh;
      line-height: 6vh;
    }

    header>h1 {
      text-align: center;
      color: #FD5711;
      letter-spacing: .8rem;
    }

    main {
      width: 100vw;
      background-color: #ffffff;
      display: flex;
      height: 90vh;
    }

    main>aside {
      width: 11.5vw;
      background-color: #4A555B;
    }

    main>aside>ul {
      background-color: #E0E0E0;
    }

    main>aside>ul>li {
      height: 2.8rem;
      font: normal normal 1.2rem/2.8rem "微软雅黑";
      background-color: #8B8D8A;
      cursor: pointer;
      text-align: center;
      margin-bottom: 0.25rem;
      color: #FEFCE5;
      transition: all 0.3s 0.1s;
    }

    main>aside>ul>li:hover {
      color: red;
    }

    main>article {
      width: 88.5vw;
    }

    main>article>div>h1 {
      text-align: center;
      color: red;
    }

    footer {
      width: 100vw;
      height: 4vh;
      line-height: 4vh;
      background-color: #7D7F7C;
    }

    footer>h4 {
      text-align: center;
      color: #ffffff;
      letter-spacing: .6rem;
    }

    .users>table {
      width: 80%;
      border-collapse: collapse;
      margin: 3rem auto 0;
      border: 0.15rem solid #D9DCD9;
    }

    .users>table>thead>tr>th {
      background-color: #D9DCD9;
      height: 2.5rem;
    }

    .users>table>thead>tr>th:not(:last-of-type) {
      border-right: 0.15rem solid #ffffff;
    }

    .users>table>tbody>tr>td {
      border: 0.15rem solid #D9DCD9;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
    }

    .users>table>tbody>tr>td>a {
      cursor: pointer;
    }

    .usersinfo>h1 {
      text-align: center;
      color: brown;
    }

    .usersinfo>button {
      margin: 4rem auto;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="app">
    <header>
      <h1>后台管理系统</h1>
    </header>
    <main>
      <aside>
        <ul @click="handle($event)">
          <li v-for="items in list" :key="items.id">{{items}}</li>
        </ul>
      </aside>
      <article>
        <router-view />
      </article>
    </main>
    <footer>
      <h4>版本信息</h4>
    </footer>
  </div>
</body>
<script>
  "use stict";
  const users = {
    data() {
      return {
        userlist: [{
          id: 0,
          name: "cz",
          age: 19
        }, {
          id: 1,
          name: "小茶",
          age: 23
        }, {
          id: 2,
          name: "毛蛋",
          age: 14
        }, {
          id: 3,
          name: "二狗",
          age: 30
        }]
      };
    },
    methods: {
      goDetail(id) {
        this.$router.push(`/usersinfo/${id}`);
      }
    },
    template: `
    <div class="users">
      <h1>用户管理区域</h1> 
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>编辑</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in userlist" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
              <a href="javascript:;" @click="goDetail(item.id)">详情</a>
            </td>
          </tr>
        </tbody>
      </table> 
    </div>`
  };

  const usersinfo = {
    props: ["id"],
    template: `
      <div class="usersinfo">
        <h1>用户详情信息,我是用户{{id}}</h1>
        <button @click="goback()">点击我实现后退</button>
      </div>`,
    methods: {
      goback() {
        this.$router.go(-1);
      }
    }
  };


  const rights = {
    template: `
    <div>
      <h1>权限管理区域</h1>  
    </div>`
  };
  const goods = {
    template: `
    <div>
      <h1>商品管理区域</h1>  
    </div>`
  };
  const orders = {
    template: `
    <div>
      <h1>订单管理区域</h1>  
    </div>`
  };
  const settings = {
    template: `
    <div>
      <h1>系统设置区域</h1>  
    </div>`
  };


  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/users"
    }, {
      path: "/users",
      component: users
    }, {
      path: "/usersinfo/:id",
      component: usersinfo,
      props: route => {
        return {
          id: route.params.id
        };
      }
    }, {
      path: "/rights",
      component: rights
    }, {
      path: "/goods",
      component: goods
    }, {
      path: "/orders",
      component: orders
    }, {
      path: "/settings",
      component: settings
    }]
  });
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        list: ["用户管理", "权限管理", "商品管理", "订单管理", "系统设置"]
      };
    },
    methods: {
      handle(event) {
        switch (event.target.innerHTML) {
          case "用户管理":
            this.$route.path == "/users" ? null : this.$router.push("/users");
            break;
          case "权限管理":
            this.$route.path == "/rights" ? null : this.$router.push("/rights");
            break;
          case "商品管理":
            this.$route.path == "/goods" ? null : this.$router.push("/goods");
            break;
          case "订单管理":
            this.$route.path == "/orders" ? null : this.$router.push("/orders");
            break;
          case "系统设置":
            this.$route.path == "/settings" ? null : this.$router.push("/settings");
            break;
        }
      }
    },
    router
  });
</script>

</html>